GRAPHIC NEWS LIVE MATCH TRACKER (last modified 6May2010)

Download the match tracker graphics from http://www.graphicnews.com.

The file GN12345W.zip decompresses to a folder called "GN12345 interactive". How the files are organized is important because the text for the Flash graphic GN12345.swf are in the .xml file, so the .swf flash graphic file has to know where to find the words. (This is similar to having a .jpg picture linked to an Illustrator file). DO NOT RENAME. 

Contents GN12345W.zip 
GN12345 interactive (folder)
-	GN12345eadMe.txt (instructions)
-	GN12345Matches.txt (list of matches in the competition)
	-	GN12345 (folder)
		-	GN12345.html (this contains the code required to play the match console)
		-	GN12345.swf (the match tracker)
		-	GN12345B.swf (a button to open a lightbox containing the match tracker)
		-	style.swf
		-	framework_3.5.0.12683.swf
		-	framework_3.5.0.12683.swz (Runtime Shared Libraries to cache application on user's computer for speed)
		-	swfobject.js (recommended javascript for displaying flash in a web page)
		- 	images (folder)
		-	xml (folder)
			-	translate.xml (this can be edited to translate the words)
			-	button.xml (this can be edited to link to different matches)

1. THIS GRAPHIC CANNOT BE PLAYED FROM YOUR DESKTOP
Unlike other Graphic News interactive graphics, this graphic requires inputting a number of variables before it can run. If you are able to turn on Web Sharing on your Mac or the equivalent on a PC, follow the instructions for where to place your files. You can then test the application by opening GN12345.html page in a browser window.

2. TO TRANSLATE OR EDIT THE WORDS
Open the file translate.xml in a text editor. Edit and save your revised translate.xml file - DO NOT RENAME IT. You can do this whilst you are viewing the graphic in your browser,  but you will only see your changes after you refresh the browser window.
NB When you save in Text Edit you need to select Plain Text, and in addition, you need to specify the encoding as UTF-8 when you Save As or by setting Preferences

Only edit the words that are not enclosed by < > tags, e.g. <HOME_TEAM>Home team (translate these words only)</HOME_TEAM>. 
Text enclosed in <b>tags</b> is bold. Do NOT change $VALUE.
NB: For best results, preserve line lengths as they appear in the original xml file.


3. PLACE THE GRAPHIC ON YOUR WEBSITE
When you first start to use GN interactive graphics, create a folder "gn_swf" on your website. You can place all GN interactive graphics inside this folder. Take the folder "GN12345" from within the folder "GN12345 interactive" and place this in the gn_swf folder on your website. 


4. TO DISPLAY A DIFFERENT MATCH
The file GN12345.html allows you to view one specific match. To view a different match, locate the text
flashvars.matchId = 1413624;

GN12345Matches.txt is a list of matchID numbers for all the matches in the tournament. Replace the number 1413624 with the number for another match to display this in the match tracker.

Feel free to adapt the page to your own requirements or to place the graphic in a different page, copy and paste the code. Remember to include the line <script type="text/javascript" src="swfobject.js"></script> between the <head></head> tags in your new page.


5. USING A SINGLE PAGE TEMPLATE TO DYNAMICALLY DISPLAY ALL MATCHES
You can use one page as a template to load all the matches, by sending two variables in your HTTP request, e.g 
<a href="gn_swf/GN12345/GN12345.html?matchID=1415981&compID=41">Link text</a>
Then place those variables into GN12345.html. e.g. if you are using php 
flashvars.fixturesUrl = "http://www2.graphicnews.com/infostradasports/xml/soccer/GN25760_Fixtures<?php echo $_REQUEST['compID']; ?>.xml";
flashvars.matchId = <?php echo $_REQUEST['matchID']; ?>;


6. HOSTING DATA ON YOUR OWN SERVERS
You may wish to host the live data on your own servers to speed up loading times in your country. Contact Graphic News for further details.


7. USING A LIGHTBOX
A lightbox is a stylish and convenient way to display interactive graphics as it keeps the original page visible underneath. To see an example look at the Graphic News Gallery. You can use a lightbox for static graphics and pictures as well as interactive graphics.

a.  Download Shadowbox from the Graphic News website -- GN22748. Place the "src" folder inside the folder on your website where javascripts are stored, e.g. "Scripts". 

b. Download a file "openShadowbox.js" from the Graphic News website -- GN23476. Place this  file inside the "src" folder on your website. This is required to use the Flash buttons supplied with the interactive graphics, e.g. GN12345B.swf.

c. Add the following inside the <head></head> section of the page in which the graphic will be located.
	<script src="Scripts/src/shadowbox.js" type="text/javascript"></script>
	<script src="Scripts/src/skin/classic/skin.js" type="text/javascript"></script>
    	<script type="Scripts/javascript">window.onload = Shadowbox.init;</script>  
	<script src="Scripts/src/openShadowbox.js" type="text/javascript"></script>
	<link href="Scripts/src/skin/classic/skin.css" rel="stylesheet" type="text/css" />

d. To open Shadowbox from your web page, either place the Flash button GN12345B.swf onto the web page or create your own text or image button.

For a text link use the following cut-and-paste code:
<a href="gn_swf/GN12345/GN12345.html" rel="lightbox; width=800; height=600; player=iframe" title="&copy; Graphic News">Your text here</a>

For an image link (e.g an iconic "play" button such as GN22747) use the following cut-and-paste code:
<a href="gn_swf/GN12345/GN12345.html" rel="lightbox; width=800; height=600; player=iframe" title="&copy; Graphic News"><img src="gn_swf/Your.jpg"></a>

Remember to change "gn_swf/GN12345/GN12345.swf" to correspond to the actual graphic you want to use. When you download GN12345W.zip, the width and height are shown below the graphic preview in the download window.

ABOUT SHADOWBOX
Shadowbox is a javascript lightbox produced by Michael J.I. Jackson and can be downloaded free of charge with the link on the GN22748 download page, or directly from his website http://mjijackson.com/shadowbox/index.html, where you will find comprehensive information about the lightbox and how to use it. We have a Commercial Licence that includes our subscribers, but we need to keep count of numbers so you must register with us to use Graphic News Interactives.


